<script>
export default {
  name: 'Pagination',
  props: {
    searchData: {
      type: Object,
      default: () => {}
    },
    tableTotalSize: {
      type: Number,
      default: null
    }
  },
  methods: {
    // 页面条数回调函数
    pageSizeChange(val) {
      this.searchData.pageSize = val
      this.$emit('getTableData')
    },
    // 页码修改回调函数
    pageChange(val) {
      this.searchData.currentPage = val
      this.$emit('getTableData')
    }
  },
  render(h) {
    return (
      <div class="pagination">
        <el-pagination
          current-page={this.searchData.currentPage}
          page-sizes={[5, 10, 15, 20]}
          page-size={this.searchData.pageSize}
          layout="total, sizes, prev, pager, next, jumper"
          total={this.tableTotalSize}
          class="page"
          on-size-change={this.pageSizeChange}
          on-current-change={this.pageChange}
        />
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  width: 100%;
  .page {
    position: absolute;
    bottom: 0;
    margin-bottom: 10px;
    background-color: #fff;
    z-index: 1;
    width: 70%;
  }
}
</style>
